<template>
  <div>
    <h1>父子组件传值</h1>
    <Zi :info="info" :obj="obj" :msg="msg" @fun="fun" @foo="foo"></Zi>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, reactive, ref } from "vue";
import Zi from "./components/Zi.vue";
export default defineComponent({
  setup() {
    const info = ref("今天天气好");
    const obj = reactive({
      name: "zheshu",
      age: 18,
    });
    provide("info", info);
    provide("num", ref(1));
    provide("obj", obj);
    function foo() {
      console.log(info);
      console.log("emit第二个事件");
    }
    const msg = ref("2222");
    function fun(value: string) {
      console.log("33333");
      console.log(info.value + value);
    }
    return {
      info,
      obj,
      foo,
      msg,
      fun,
    };
  },
  components: {
    Zi,
  },
});
</script>

<style scoped>
</style>